<!doctype html>
<html class="no-js">
<head>
  <include file="./Apps/WebApp/View/default/common_meta.html" />
  <title>{$goodsDetails['goodsName']} - {$CONF['mallTitle']}</title>
  <meta name="keywords" content="{$goodsDetails['goodsKeywords']}">
  <meta name="description" content="{$goodsDetails['goodsName']},{$CONF['mallDesc']}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/wst_page_common.css?v={$WST_V}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/goods_details.css?v={$WST_V}">
  <style>
    li{ list-style:none;}

    .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    /*tab*/
    .tab{ line-height:56px; font-size:14px;}
    .tab a{ color:#07c;}
    .tab a:hover{ color:#c00;}
    .tab a.cur{ font-weight:bold;}
    /*商品详细页*/
    /*iteminfo*/
    .iteminfo{}
    .iteminfo_tit{ color:#333; font-size:22px; font-family:"微软雅黑",Arial, Helvetica, sans-serif; border-bottom:1px solid #e3e3e3; font-weight:normal; padding-bottom:12px; line-height:32px;}
    .iteminfo_parameter{ padding:8px 0; padding-left:70px;}
    .iteminfo_parameter_default{ color:#888;}
    .iteminfo_parameter dt{ margin-left:-70px; float:left; display:inline; width:60px; white-space:nowrap; text-align:right; color:#888;}
    .iteminfo_mktprice{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-decoration:line-through;}
    .lh32{ line-height:32px;}
    .iteminfo_price{ color:#c00; font-size:14px; font-family:Arial, Helvetica, sans-serif; vertical-align:middle;}
    .sys_item_price{ color:#c00; font-size:22px; vertical-align:middle;}
    .iteminfo_buying{ background:#f7f7f7; padding:12px 0;}

    /*规格*/
    .sys_item_spec dl.iteminfo_parameter{ padding-top:5px; padding-bottom:5px;}
    .sys_item_spec dl.iteminfo_parameter dt{ line-height:32px;}

    /*一下正对图片*/
    .sys_spec_img{}
    .sys_spec_img li{ float:left; height:54px; position:relative; margin:2px 6px 2px 0;}
    .sys_spec_img li a{height:50px; width:50px; padding:1px; border:1px solid #ccc; float:left; background:#fff; display:inline-block; outline:none;}
    .sys_spec_img li a img{ width:50px; height:50px; display:block;}
    .sys_spec_img li a:hover{ border:2px solid #e4393c; padding:0; text-decoration:none;}
    .sys_spec_img li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
    .sys_spec_img li.selected a{ border:2px solid #e4393c; padding:0;}
    .sys_spec_img li.selected i{ display:block;}

    .sys_spec_text{}
    .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
    .sys_spec_text li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
    .sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
    .sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
    .sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
    .sys_spec_text li.selected i{ display:block;}
  </style>
</head>
<body>
  <div class="wst-page" id="wst-page1">
    <header class="wst-nav">
      <div class="am-g">
        <div class="am-u-sm-2">
          <a href="javascript:history.back();" class="wst-header-left"><i class="am-icon-angle-left am-icon-sm"></i></a>
        </div>
        <div class="am-u-sm-8 wst-nav-center">
          <span class="wst-header-center">商品详情</span>
        </div>
        <div class="am-u-sm-2">&nbsp;</div>
      </div>
    </header>

    <?php if( empty($goodsDetails) ){ ?>
      <div class="am-g detail-empty">
        <div class="am-u-sm-12 am-u-sm-centered" style="text-align:center;">对不起，没有找到该商品。</div>
      </div>
    <?php }else{ ?>
      <input type="hidden" id="goodsId" value="{$goodsDetails['goodsId']}" autocomplete="off">
      <input type="hidden" id="shopId" value="{$goodsDetails['shopId']}" autocomplete="off">
      <input type="hidden" id="goodsAttrId" value="{$goodsDetails['goodsAttrId']}" autocomplete="off">
      <div class="goods-detail-container">
        <img src="__ROOT__/{$CONF['goodsImg']}" data-echo="__ROOT__/{$goodsDetails['goodsThums']}" style="width:100%;">
        <div class="goods-container">
          <div class="goods-title-area">
            <div style="float:left;">
              <img src="__ROOT__/Apps/WebApp/View/default/images/goods-title-icon.png" class="goods-title-icon">
            </div>
            <div class="goodsname-right">
              {$goodsDetails['goodsName']}
              <?php if($goodsDetails['goodsSpec']!=''){ ?>
                <span class="spec">规格 : {$goodsDetails['goodsSpec']}</span>
              <?php } ?>
            </div>
            <div style="clear:both;"></div>
          </div>
          <?php if( $goodsDetails['isSale'] != 1 ){ ?>
            <div class="am-g am-g-collapse notsaletips">该商品已下架~</div>
          <?php }else{ ?>
            <div class="am-g am-g-collapse row2-area">

              <div class="am-u-sm-6 goods-price-area">
                <span class="goods-price" id="goodsPrice">￥{$goodsDetails['shopPrice']}</span>
                  <?php if( $goodsDetails['goodsStock'] > 0 ){ ?>
                    <span class="goods-stock" id="goodsStock">有货</span>
                  <?php }else{ ?>
                    <span class="goods-stock goods-stock-red" id="goodsStock">无货</span>
                  <?php } ?>
                  <?php if( $favoriteId ){ ?>
                    <button type="button" class="am-btn am-btn-primary am-btn-xs favorite" disabled="disabled">已关注该商品</button>
                  <?php }else{ ?>
                    <button type="button" class="am-btn am-btn-primary am-btn-xs favorite" onclick="javascript:favorite(this, {$goodsDetails['goodsId']});">关注该商品</button>
                  <?php } ?>
              </div>
              <div class="am-u-sm-6 goods-shopName-area">
                <a href="javascript:void(0);" onclick="javascript:goToShopHome({$goodsDetails['shopId']},{$goodsDetails['isSelf']});">
                  <span class="goods-shopName">{$goodsDetails['shopName']}</span>
                </a>
              </div>
              <div style="clear:both;"></div>
            </div>
            <if condition="count($goodsDetails['priceAttrs']) gt 0">
              <div class="attr-row" style="display: none">
                {$goodsDetails["priceAttrName"]} &nbsp;
                <volist name="goodsDetails['priceAttrs']" id="avo">
                  <button type="button" class="am-btn am-btn-default am-btn-xs am-radius priceattr <if condition="$goodsDetails['goodsAttrId'] eq $avo['id']">active</if>" onclick="javascript:checkStock(this,{$avo['id']},{$goodsDetails['goodsId']});">{$avo['attrVal']}</button>
                </volist>
              </div>

        <div>

          <div class="iteminfo_buying">
            <div class="sys_item_spec">
          <volist name="data" id="vo" key="k">
          <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="{$k}">
              <dt>{$key}{$vo.rowName}</dt>
            <dd>
              <ul class="sys_spec_text">
                <volist name="vo" id="vv">
                    <li data-aid="{$vv}"><a href="javascript:;" title="{$vv}">{$vv}</a><i></i></li>
                </volist>
              </ul>
            </dd>
          </dl>
          </volist>
              </div>
            </div>
        </div>
            </if>

            <?php if( $goodsMaxDiffPrice > -1 ){ ?>
            <!-- 优惠套餐 -->
            <a href="#getPackagesList">
              <div class="am-g am-g-collapse goods-desc-row">
                <div class="am-u-sm-11">优惠套餐 <span class="max-discount">( 最高可省￥{$goodsMaxDiffPrice} )</span></div>
                <div class="am-u-sm-1" style="text-align:right;"><i class="am-icon-angle-right am-icon-sm"></i></div>
              </div>
            </a>
            <?php } ?>

            <div class="am-g am-g-collapse goods-desc-row" onclick="javascript:viewAppraises({$goodsDetails['goodsId']});">
              <div class="am-u-sm-11">商品评价 (<?php echo ($goodsDetails['appraiseNum']>0) ? $goodsDetails['appraiseNum'] : 0;?>)</div>
              <div class="am-u-sm-1" style="text-align:right;"><i class="am-icon-angle-right am-icon-sm"></i></div>
            </div>
            <div class="am-tabs" id="gdTabs" style="margin-top: 5px;" data-am-tabs>
              <ul class="am-tabs-nav am-nav am-nav-tabs" style="font-size:0.9em;">
                <li class="am-active"><a href="javascript:void(0);" id="goodsDetailsTab">商品介绍</a></li>
                <li><a href="#goodsDetailsTab1">规格参数</a></li>
              </ul>
              <div class="am-tabs-bd" style="border-bottom:0;">
                <div class="am-tab-panel am-fade am-in am-active" id="goodsDetailsTab2">
                  <div class="am-u-sm-12 goods-desc" id="goodsDesc"><?php echo html_entity_decode($goodsDetails['goodsDesc']);?></div>
                </div>
                <div class="am-tab-panel am-fade" id="goodsDetailsTab1">
                  <if condition="count($goodsDetails['attrs']) gt 0">
                    <volist name="goodsDetails['attrs']" id="vo">
                      <if condition="$vo['attrVal'] !='' ">
                        <span class="spec">{$vo['attrName']} : {$vo['attrVal']}</span>
                      </if>
                    </volist>
                  </if>
                </div>
              </div>
            </div>
            <div class="am-g am-g-collapse bottom-area">
              <div class="am-u-sm-5">
                <input type="button" value="-" id="goodscount-jian" class="goodscount goodscount-jian" onclick="javascript:changeGoodsNum(1);">
                <input type="text" value="1" id="goodscount" class="goodscount goodscount-num" autocomplete="off" maxVal="{$goodsDetails['goodsStock']}" maxlength="3" onkeypress="return WST.isNumberKey(event);" onkeyup="javascript:changeGoodsNum(0);">
                <input type="button" value="+" id="goodscount-jia" class="goodscount goodscount-jia" onclick="javascript:changeGoodsNum(2);">
              </div>
              <div class="am-u-sm-7 cart-area">
                <?php if( $goodsDetails['shopAtive'] != 1 ){ ?>
                  <input type="button" value="店铺休息中，暂停营业。" class="shopative">
                <?php }else if( $goodsDetails['goodsStock'] > 0 ){ ?>
                  <input type="button" value="立即购买" id="buynow" class="buynow active" onclick="javascript:buyItNow({$goodsDetails['goodsId']});">
                  <input type="button" value="加入购物车" id="add-to-cart" class="add-to-cart active" onclick="javascript:addToCart({$goodsDetails['goodsId']});">
                <?php }else{ ?>
                  <input type="button" value="立即购买" id="buynow" class="buynow" onclick="javascript:buyItNow({$goodsDetails['goodsId']});" disabled="disabled">
                  <input type="button" value="加入购物车" id="add-to-cart" class="add-to-cart" onclick="javascript:addToCart({$goodsDetails['goodsId']});" disabled="disabled">
                <?php } ?>
              </div>
            </div>
          <?php } ?>
        </div>
      </div>
    <?php } ?>
  </div>
  <div class="wst-page wst-page2" id="wst-page2" style="display:none;"></div>

  <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="wst-default-loading">
    <div class="am-modal-dialog">
      <div class="am-modal-hd" id="loadingTips">Loading...</div>
      <div class="am-modal-bd">
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
  </div>
  <input type="hidden" id="clicknum" value="0">
  <include file="./Apps/WebApp/View/default/common_footer.html" />
  <include file="./Apps/WebApp/View/default/goods_pakages.html" /><!-- 优惠套餐模板 -->
  <include file="./Apps/WebApp/View/default/common_js.html" />
  <script src="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/js/handlebars.min.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/js/amazeui.widgets.helper.min.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/js/wst_page_common.js?v={$WST_V}"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/js/goods_details.js?v={$WST_V}"></script>
  <script>
    $(function(){
      var num=1;
      $(".sys_item_spec .sys_item_specpara").each(function(){
        var i=$(this);
        var p=i.find("ul>li");
        p.click(function(){
          if(!!$(this).hasClass("selected")){
            $(this).removeClass("selected");
            i.removeAttr("data-attrval");
          }else{
            $(this).addClass("selected").siblings("li").removeClass("selected");
            i.attr("data-attrval",$(this).attr("data-aid"));
            $('#clicknum').val(num);
            num=num+1;
            var dl=$('dl').length;
            var sel=$('#clicknum').val();
            if(dl<=sel){
              aa();
            }
          }
          //              getattrprice() //输出价格
        })
      })
    });
  function aa(){
//    var q=$('.active').text();
    //获得实际选项
    var price=new Array();
    for(i=0;i<$('.priceattr').length;i++){
      price[i]=$('.priceattr').eq(i).text();
    }
    //获得显示选项
    var attr='';
    for(i=0;i<$('.selected').length;i++){
      attr+=$('.selected').eq(i).text()+',';
    }
    attrname=attr.substring(0,attr.length-1);
// 控制实际选择
   for(i=0;i<$('.priceattr').length;i++){
     if(attrname==price[i]){
       $('.priceattr').eq(i).click();
     }
   }
  }
  </script>
</body>
</html>